<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<style type="text/css">
	.box{
		width: 520px;
		height: 250px;
		margin: 0px auto;
		background: #272822 url() 0 0 no-repeat;
	}
	.main{
		width: 520px;
		height: 100px;
	}
	.list{
		width: 95px;
		height: 95px;
		list-style: none;
		border: 5px solid red;
		text-align: center;
		background: #414141 url() 0 0 no-repeat;
		float: left;
	}
	.header{
		width: 520px;
		height: 55px;
		margin: 0px auto;
		font-size: 24px;
		text-align: center;
		color: #FFFFFF;
	}
	.foot{
		width: 520px;
		height: 40px;
	}
	.header hr{
		border: #A8FF47 url() 0 0 no-repeat;
	}
	.list2{
		width: 95px;
		height: 40px;
		text-align: center;
		/*margin-right: 10px;*/
		float: left;
		list-style: none;
		border: 5px solid red;
		color: #FFFFFF;
	}
	.list p{
		font-size: 24px;
		font-weight: 400;
		line-height: 95px;
		color: #A3FF47;
	}
		
	</style>
	<script type="text/javascript">
	//1，通过定时器，写一个活动倒计时。
	//计算出目前到元旦还有几天几几小时分几秒
	function active(){
			 nowDate = new Date();
			n=nowDate.getTime();
			yuanDate = new Date("2018-01-01")
			y=yuanDate.getTime();
			z=y-n;
			day1 = z/1000/60/60/24;
			day2 = Math.floor(day1);
			hours1=(day1-day2)*24;
			hours2=Math.floor(hours1);
			minte1 = (hours1-hours2)*60;
			minte2 =Math.floor(minte1);
			mao1 = (minte1-minte2)*60;
			mao2 = Math.round(mao1)
			obj_day1 = document.getElementById('day');
			obj_day2 = document.getElementById('hours');
			obj_day3 = document.getElementById('minite');
			obj_day4 = document.getElementById('miao');
			obj_day1.textContent =day2;
			obj_day2.textContent =hours2;
			obj_day3.textContent =minte2;
			obj_day4.textContent =mao2;
			
		}
		setInterval(active,1000);
	</script>
	<title>定时器倒计时</title>
</head>
<body>
	<div class="box">
		<div class="header">距离元旦还有:<br/><hr></div>
		<ul class="main">
			<li class="list"><p id="day">111</p></li>
			<li class="list"><p id="hours">111</p></li>
			<li class="list"><p id="minite">111</p></li>
			<li class="list"><p id="miao">111</p></li>
		</ul>
	<ul class="foot">
		<li class="list2">天</li>
		<li class="list2">小时</li>
		<li class="list2">分钟</li>
		<li class="list2">秒</li>
	</ul>
	</div>
</body>
</html>